<template>
  <div>
    <div class="title">
      <i style="padding: 12px" @click="back" class="el-icon-arrow-left"></i>
      琪琪小说
    </div>
    <div class="container-fluid">
      <div class="list btn btn-outline-primary" v-for="(book,index) in books" :key="index" @click="jumpTo(book.id)">
        {{ book.title }}
      </div>
    </div>
    <div class="more btn btn-primary" @click="more" v-show="isShow">更多</div>
  </div>

</template>

<script>
import 'bootstrap/dist/css/bootstrap.min.css'
import UrlConfig from '../utils/api'

export default {
  name: 'BookList',
  data () {
    return {
      size: 20,
      page: 0,
      books: [],
      isShow: true
    }
  },
  methods: {
    more () {
      const context = this
      context.page++
      let typeId = this.$route.query.type
      this.$fetch(UrlConfig.book_list, {
        size: context.size,
        type: typeId,
        page: context.page
      })
        .then(function (res) {
          context.books = res.data.data
          if (res.data.data == null) {
            context.isShow = false
          }
        })
    },
    jumpTo (bookId) {
      this.$router.push({
        path: '/p_book/content',
        query: {
          id: bookId
        }
      })
    },
    back () {
      this.$router.push({
        path: '/p_book'
      })
    },
    notify_message (msg) {
      this.$message(msg)
    }
  },
  mounted: function () {
    const context = this
    let typeId = this.$route.query.type
    this.$fetch(UrlConfig.book_list, {
      size: context.size,
      type: typeId,
      page: context.page
    })
      .then(function (res) {
        context.books = res.data.data
        if (res.data.data == null) {
          context.isShow = false
        }
      })
      .catch(function () {
        context.notify_message('加载失败')
      })
  }
}
</script>

<style scoped>
  .title {
    background: lightpink;
    margin: 0;
    color: white;
    width: 100%;
    height: 40px;
    line-height: 40px;
  }

  .back-image {
    height: 40px;
  }

  .list {
    color: deeppink;
    border-color: lightpink;
    margin-top: 5px;
    width: 100%;
  }

  .more {
    padding: 5px 10px 5px 10px;
    border-color: lightpink;
    background: lightpink;
    margin: 10px;
  }
</style>
